<template>
	<view>


		<c-navBar :title="formData.article_id?'嗨词商学院-修改':'嗨词商学院-新增'" :showAdd="false" @addClick="addItem"></c-navBar>
		<view>
			<CForm :formRules="formRules" v-model:formData="formData" :formList="formList" @emitSubmit="emitSubmit">
				<uni-row gutter="20">
					<uni-col span="6">

						<text class="titles">
							<text style="color: rgb(221, 82, 77);">*</text>
							头像</text>
					</uni-col>
					<uni-col span="18">
						<view class="upload-box" @click="downImg">
							<van-loading size="35" v-if="imgLoading" color="rgb(221, 82, 77)"
								text-color="rgb(221, 82, 77)" vertical>
								上传中
							</van-loading>
							<van-icon v-if="!formData.cover_image && !imgLoading" name="plus" size="68rpx" />
							<image v-if="formData.cover_image && !imgLoading" class="upload-img"
								:src="formData.cover_image"></image>
						</view>
					</uni-col>
					<uni-col span="6">

						<text class="titles">视频</text>
					</uni-col>
					<uni-col span="18" @click="downVideo">
						<view class="upload-box">

							<van-loading size="35" v-if="videoLoading" color="rgb(221, 82, 77)"
								text-color="rgb(221, 82, 77)" vertical>上传中</van-loading>
							<van-icon v-if="!formData.video_url && !videoLoading" name="plus" size="68rpx" />
							<video v-if="formData.video_url && !videoLoading" class="upload-video"
								:src="formData.video_url" controls></video>
						</view>
					</uni-col>
				</uni-row>

			</CForm>

		</view>
	</view>
</template>

<script setup>
	import {
		getArticleDetail,
		addArticle,
		editArticle

	} from "@/apis/businessSchool.js"
	import {
		validatePhone,
		validateEmail,
		validateIdCard
	} from '@/utils/validates.js';
	import {
		ref,
		reactive
	} from 'vue';
	import CForm from '@/components/CForm/CForm.vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const loading = ref(false)
	const imgLoading = ref(false)
	const videoLoading = ref(false)
	const formRules = {
		article_title: {
			rules: [{
				required: true,
				errorMessage: '请输入文章标题',
			}],
			validateTrigger: 'blur'
		},
		article_synopsis: {
			rules: [{
				required: true,
				errorMessage: '请输入文章简介',
			}]
		},
		article_content: {
			rules: [{
				required: true,
				errorMessage: '请输入文章详情',
			}]
		},

	}

	const formList = ref([{
			formType: 'input',
			name: 'article_title',
			label: '文章标题',
			placeholder: '请输入文章标题',
			value: '',
			required: true
		},
		{
			formType: 'input',
			type: 'textarea',
			name: 'article_synopsis',
			label: '文章简介',
			placeholder: '',
			value: '',
			autosize: {
				maxHeight: 150,
				minHeight: 1
			},
			required: true
		},
		{
			formType: 'input',
			type: 'textarea',
			name: 'article_content',
			label: '文章详情',
			placeholder: '',
			value: '',
			autosize: {
				maxHeight: 150,
				minHeight: 1
			},
			required: true
		},
		{
			formType: 'radio',
			name: 'article_type',
			label: '类别',
			placeholder: '请选择类别',
			value: '',
			options: [{
				text: '图文',
				value: 1
			}, {
				text: '视频',
				value: 2
			}]
		},

	])
	const formData = reactive({
		article_id: 0,
		category_id: 0,
		article_title: '',
		article_type: 1,
		article_synopsis: '',
		cover_image: '',
		video_url: '',
		article_content: '',
	})
	onLoad((options) => {
		formData.category_id = Number(options.category_id)
		if (options.id) {
			formData.article_id = Number(options.id)
			getDetail(Number(options.id))
		}
	})
	const downImg = () => {
		if (imgLoading.value) {
			return
		}
		uni.chooseImage({
			success: (chooseImageRes) => {
				imgLoading.value = true
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: 'https://haici.snooowball.cn/api/user/uploadImg', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						imgLoading.value = false
						let datas = JSON.parse(uploadFileRes.data)
						formData.cover_image = datas.data.url
						// console.log(datas.data.url);
					},
					complete: (e) => {
						imgLoading.value = false
					}
				});
			}
		});

	}
	const getDetail = async (id) => {
		let {
			data
		} = await getArticleDetail({
			article_id: id,
			type: 2
		})
		formData.article_title = data.article_title
		formData.article_type = data.article_type
		formData.article_synopsis = data.article_synopsis
		formData.cover_image = data.cover_image
		formData.video_url = data.video_url
		formData.article_content = data.article_content
		// console.log(data)
	}
	const downVideo = () => {
		if (videoLoading.value) {
			return
		}
		uni.chooseVideo({
			sourceType: ['camera', 'album'],
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;

				videoLoading.value = true
				uni.uploadFile({
					url: 'https://haici.snooowball.cn/api/user/uploadImg', //仅为示例，非真实的接口地址
					filePath: chooseImageRes.tempFilePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let datas = JSON.parse(uploadFileRes.data)
						formData.video_url = datas.data.url

						videoLoading.value = false
						// console.log(datas.data.url);
					},
					complete: (e) => {
						videoLoading.value = false
					}
				});
			}
		});
	}
	const emitSubmit = async () => {
		console.log(formData)
		if (!formData.cover_image) {
			uni.showToast({ 
				icon: 'none',
				title: '请上传头像',
				duration: 2000
			});
			return
		}
		if (formData.article_type === 2) {
			if (!formData.video_url) {
				uni.showToast({
					icon: 'none',
					title: '请上传视频',
					duration: 2000
				});
				return
			}
		}
		try {
			if (loading.value) {
				return
			}
			loading.value = true
			if (formData.article_id !== 0) {
				let data = await editArticle(formData)
				if (data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '保存成功',
						duration: 2000
					});
				}
			} else {
				let data = await addArticle(formData)
				if (data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '保存成功',
						duration: 2000
					});
					uni.navigateBack({
						delta: 1
					})
				}
			}
			loading.value = false
		} catch {
			loading.value = false
		}
	}
</script>

<style scoped lang="scss">
	.upload-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90%;
		height: 400rpx;
		background: rgba(255, 255, 255, 1);

		border: 1.75px solid rgba(236, 236, 236, 1);
		margin-bottom: 30rpx;

		.upload-img {
			width: 80%;
			height: 300rpx;
		}

		.upload-video {
			width: 80%;
			height: 260rpx;
		}
	}

	.titles {
		margin-left: 24rpx;
		font-size: 32rpx;
	}
</style>